<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="module" src="./js/main.js"></script>
    <title>你好，Vue.js</title>
</head>
<body>
    <div id="app">
        <h1> {{ sayHello }} </h1>
        <!-- 上述模版语法背后政治的 Vue 语法：
        <h1 v-text="sayHello"></h1>
        -->
        <img :src="vueLogo" v-show="isShow" style="width:200px">
        <!-- 上述简写指令的完整 Vue 语法：
        <img v-bind:src="vueLogo" style="width:200px">
        -->
        <input type="button" :value="isShow?'隐藏':'显示'" @click="toggleShow" />
        <!-- 上述简写指令的完整 Vue 语法：
        <input type="button" v-bind:value="isShow?'隐藏':'显示'" v-on:click="toggleShow" />
        -->            
    </div>
</body>
</html>
